<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useWeatherStore } from '@/stores/counter'
import CommonChart from '@/components/commonChart.vue'
const dataLoaded = ref(false);
const route = useRoute()
const key = ref('')
const adcode = ref('')
const city = ref('')
const WeatherStore = useWeatherStore()
watch([() => route.params.adecode, () => route.query.search], async ([newAdcode, newCity]) => {
    dataLoaded.value = false;
    adcode.value = newAdcode;
    city.value = newCity;
    key.value = WeatherStore.key;
    await WeatherStore.getWeather(adcode.value, key.value, 'base');
    dataLoaded.value = true;
    WeatherStore.getSearchInfo(newAdcode, newCity, WeatherStore.Weather.temperature)
}, { immediate: true });
</script>

<template>

    <div class="flex flex-col text-white">
        <div class="p-2 text-center bg-weather-secondary">
          "你正在预览{{city}}的天气信息"
          <span v-if="!WeatherStore.checkdata(adcode)">，可以通过右上角的"+"号按钮保存起来</span>
        </div>
      <div class="container flex flex-col text-center mt-6 gap-4">
        <h1>当日气温是：{{ WeatherStore.Weather.temperature }}摄氏度</h1>
        <h1>当日天气是：{{ WeatherStore.Weather.weather }}</h1>
        <h1>当日风向是：{{ WeatherStore.Weather.winddirection }}风</h1>
        <h1>当日风力是：{{ WeatherStore.Weather.windpower }}级</h1>
        <hr class="border-white border-opacity-10 mt-6">
        <CommonChart  :city="city" :adcode="adcode"/>
      </div>
    </div>
 

 
</template>

<style scoped>
.bg-weather-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 78 113 );
}

</style>